<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text指令</title>
    <script src="../vue.js"></script>
</head>
<body>
    <!-- 
        我们学过的指令：
            v-bind ：单向绑定解析表达式，可简写为 :xxx。
            v-model: 双向绑定数据
            v-for：遍历数组/对象/字符串
            v-on：绑定事件监听，可写为@
            v-if：条件渲染（动态控制节点是否存在）
            v-else：条件渲染（动态控制节点是否存在）
            v-show：条件渲染（动态控制节点是否展示）
     -->
     <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <h2 v-text="name">欢迎来到学习</h2>
        <h2 v-text="address">欢迎来到学习</h2>
        <h2 v-text="address">欢迎来到{{name}}学习</h2>
        
    </div>
    <script>

        Vue.config.productionTip=false;
        
        new Vue({ 
            el: '#root',
            data: {
                name:'黑马程序员',
                address:'<h4>娃哈哈</h4>',
            }
        })

    </script>
</body>
</html>